﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>详情</title>
    <link type="text/css" href="css/basic.css" rel="stylesheet">
    <link type="text/css" href="css/swiper.min.css" rel="stylesheet">
    <link type="text/css" href="css/index.css" rel="stylesheet">

    <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>

</head>
<body>
<header class="news-hd news-imgList-hd clearfix">
    <div class="mod-back-btn fn-fl"><i class="i-topPoint"></i></div>
    <div class="mod-header-txt fn-fl">黔送铁军圆满完成天生桥换流站抢修任务</div>
    <div class="mod-back-btn j-share fn-fr"><i class="i-ellips">●●●</i></div>
</header>
<!--内容模块-->
<section class="news-imgList-content ">
    <div class="swiper-container">
        <div class="swiper-wrapper">

            <div class="swiper-slide">
                <div class="news-imgList-img">
                    <img src="images/pic02.jpg" alt="" />
                </div>
                <div class="news-imgList-info">
                    <div class="news-imgList-info-wrap">
                        <header class="news-imgList-header clearfix">
                            <p class="news-imgList-num fn-fl"><em><i>1</i>/</em>3</p>
                            <div class="news-imgList-header-hd fn-fl">
                                <p class="news-imgList-org fn-wto">编辑：周一琪 / 摄影：北海   成波    王成威</p>
                                <p class="news-imgList-time"><span class="mr10">2016-04-19</span><span><i class="i-eye"></i>6014</span> </p>
                            </div>
                        </header>
                        <article class="news-imgList-article clearfix">
                           <div class="news-article-content fn-tal fn-fl">
                               本网讯 3月9日，南网超高压输电公司天生桥局天生桥换流站值班人员在巡查过程中发现220千伏极超高压输电公司天生桥局天生桥换流站值班人员在巡查过程中发现220千伏极超高压输电公司天生桥局天生桥换流站值班人员在巡查过程中发现220千伏极本网讯 3月9日，南网超高压输电公司天生桥局天生桥换流站值班人员在巡查过程中发现220千伏极
                           </div>
                            <a href="javascript:void(0);" data-key="o" class="news-article-btn fn-fr j-news-btn"></a>
                        </article>
                    </div>
                </div>
            </div>

            <div class="swiper-slide">
                <div class="news-imgList-img">
                    <img src="images/pic03.jpg" alt="" />
                </div>
                <div class="news-imgList-info">
                    <div class="news-imgList-info-wrap">
                        <header class="news-imgList-header clearfix">
                            <p class="news-imgList-num fn-fl"><em><i>2</i>/</em>3</p>
                            <div class="news-imgList-header-hd fn-fl">
                                <p class="news-imgList-org fn-wto">编辑：周一琪 / 摄影：北海   成波    王成威</p>
                                <p class="news-imgList-time"><span class="mr10">2016-04-19</span><span><i class="i-eye"></i>6014</span> </p>
                            </div>
                        </header>
                        <article class="news-imgList-article clearfix">
                           <div class="news-article-content fn-tal fn-fl">
                               本网讯 3月9日，南网超高压输电公司天生桥局天生桥换流站值班人员在巡查过程中发现220千伏极超高压输电公司天生桥局天生桥换流站值班人员在巡查过程中发现220千伏极超高压输电公司天生桥局天生桥换流站值班人员在巡查过程中发现220千伏极本网讯 3月9日，南网超高压输电公司天生桥局天生桥换流站值班人员在巡查过程中发现220千伏极
                           </div>
                            <a href="javascript:void(0);" data-key="o" class="news-article-btn fn-fr j-news-btn"></a>
                        </article>
                    </div>
                </div>
            </div>

            <div class="swiper-slide">
                <div class="news-imgList-img">
                    <img src="images/pic04.jpg" alt="" />
                </div>
                <div class="news-imgList-info">
                    <div class="news-imgList-info-wrap">
                        <header class="news-imgList-header clearfix">
                            <p class="news-imgList-num fn-fl"><em><i>3</i>/</em>3</p>
                            <div class="news-imgList-header-hd fn-fl">
                                <p class="news-imgList-org fn-wto">编辑：周一琪 / 摄影：北海   成波    王成威</p>
                                <p class="news-imgList-time"><span class="mr10">2016-04-19</span><span><i class="i-eye"></i>6014</span> </p>
                            </div>
                        </header>
                        <article class="news-imgList-article clearfix">
                           <div class="news-article-content fn-tal fn-fl">
                               本网讯 3月9日，南网超高压输电公司天生桥局天生桥换流站值班人员在巡查过程中发现220千伏极超高压输电公司天生桥局天生桥换流站值班人员在巡查过程中发现220千伏极超高压输电公司天生桥局天生桥换流站值班人员在巡查过程中发现220千伏极本网讯 3月9日，南网超高压输电公司天生桥局天生桥换流站值班人员在巡查过程中发现220千伏极
                           </div>
                            <a href="javascript:void(0);" data-key="o" class="news-article-btn fn-fr j-news-btn"></a>
                        </article>
                    </div>
                </div>
            </div>

            <!--这是最后一个推荐图集 Start-->
            <div class="swiper-slide">
                <div class="news-imgList-group-ul">
                    <div class="news-imgList-content-hd fn-tal">
                        <i class="i-select mr5"></i>图集浏览完毕
                    </div>
                    <div class="news-ground-tip fn-tal">
                        <i class="i-ground"></i>推荐图集
                    </div>
                    <ul class="news-imgList-ul">
                        <li>
                            <a href="javascript:void(0);" class="news-imgList-item fn-pr">
                                <div class="news-imgList-item-img">
                                    <img src="images/pic03.jpg" alt="" />
                                </div>
                                <div class="news-imgList-item-hd">
                                    <h3 class="news-imgList-item-txt">桂林城郊公司：情暖三月天幸福女人节</h3>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" class="news-imgList-item fn-pr">
                                <div class="news-imgList-item-img">
                                    <img src="images/pic04.jpg" alt="" />
                                </div>
                                <div class="news-imgList-item-hd">
                                    <h3 class="news-imgList-item-txt">桂林城郊公司：情暖三月天幸福女人节</h3>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <div class="swiper-button-next"><a href="javascript:void(0);">下一图集</a></div>
                    <div class="swiper-button-prev"><a href="javascript:void(0);">上一图片</a></div>
                </div>
            </div>
            <!--这是最后一个推荐图集 End-->
        </div>
    </div>
</section>

<!--S:分享-->
<div class="share-pop"></div>
<section class="mod-share">
    <div class="mod-share-grid">
        <header>分享到</header>
        <div class="mod-share-bd">
            <ul class="clearfix">
                <li class="fn-fl">
                    <a href="#">
                        <em><img src="images/i-wx.png" /> </em>
                        <span>微信好友</span>
                    </a>
                </li>
                <li class="fn-fl">
                    <a href="#">
                        <em><img src="images/i-wxq.png" /></em>
                        <span>微信朋友圈</span>
                    </a>
                </li>
                <li class="fn-fl">
                    <a href="#" target="_blank">
                        <em><img src="images/i-sina.png" /></em>
                        <span>新浪微博</span>
                    </a>
                </li>
                <li class="fn-fl">
                    <a href="#">
                        <em><img src="images/i-qq.png" /></em>
                        <span>QQ好友</span>
                    </a>
                <li class="fn-fl">
                    <a href="#">
                        <em><img src="images/i-tqq.png" /></em>
                        <span>腾讯微博</span>
                    </a>
                </li>
                <li class="fn-fl">
                    <a href="#">
                        <em><img src="images/i-zqq.png" /></em>
                        <span>QQ空间</span>
                    </a>
                </li>
            </ul>
        </div>

        <a href="javascript:void(0)" class="mod-share-close j-share-close">取 消</a>
    </div>
</section>
<!--E:分享-->
<script type="text/javascript" src="js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container');
    $(function(){
        //点击查看详细信息
        $(".j-news-btn").on('click',function(){
            var $Dkey = $(this).attr("data-key");
            if($Dkey=="o"){
                $(".news-imgList-info").animate({height:"70%"},800);
                $(this).addClass("news-article-btn-down");
                $(this).attr("data-key","f");
            }else if($Dkey=="f"){
                $(".news-imgList-info").animate({height:"30%"},800);
                $(this).removeClass("news-article-btn-down");
                $(this).attr("data-key","o");
            }
        })
        //分享
        $(".j-share").click(function(){
            $(".share-pop,.mod-share").show();
            $(".mod-share").animate({bottom:"0"});
           // $('#xl').attr('href',url);
           // $('#qq').attr('href',url);
           // $('#tx').attr('href',url);
           // $('#kj').attr('href',url);
        });
        $(".j-share-close").click(function(){
            $(".mod-share").animate({bottom:"-90%"});
            $(".share-pop").hide();
        });

    })
</script>
</body>
</html>